<form class="layui-form" style="width:80%;" lay-filter="formFilter">
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">产品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="产品名称">
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">产品简介</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入产品简介" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">产品分类</label>
        <div class="layui-input-inline">
            <select name="cate_id" id="cate_id" lay-verify="required">
                <option value="">请选择</option>
                {volist name="cate_list" id="vo"}
                <option value="{$vo.id}">{$vo.title}</option>
                {/volist}
            </select>
        </div>
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">缩略图</label>
        <div class="layui-input-inline">
            <div id="uploadElem" data-type="product_banner" data-done="banner">
                <div class="layui-upload-list thumbBox mag0 magt3">
                    <img id="uploadImg" class="layui-upload-img thumbImg">
                </div>
            </div>
        </div>
        <input type="hidden" name="banner" value="" id="uploadImgId" lay-verify="required">
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">轮播图</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="uploadElemCarousel" data-type="product_carousel"
                        data-done="carousel">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="layui-upload-list" id="carouselImageList"></div>
            </div>
        </div>
        <input type="hidden" name="carousel" value="" id="uploadImgIdCarousel">
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <script id="content" name="content" type="text/plain"></script>
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="number" name="price" class="layui-input" lay-verify="required" placeholder="价格">
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="remarks" class="layui-input" lay-verify="required" placeholder="备注">
        </div>
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" name="orderby" class="layui-input" lay-verify="required" placeholder="排序">
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            {volist name="status_list" id="vo"}
            {if ($vo['id'] != 0)}
            <input type="radio" name="status" value="{$vo.id}" title="{$vo.title}">
            {/if}
            {/volist}
        </div>
    </div>

    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formSubmit">确定</button>
        </div>
    </div>
</form>

<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
    //编辑器
    var ue = UE.getEditor('content', {
        autoFloatEnabled: true,
        initialFrameWidth: 600,
        initialFrameHeight: 400,
    });
</script>

<script>
    var form_obj = {
        formFilter: 'formFilter',
        formSubmit: 'formSubmit',
        get_select_two_html: function ($data) {
            var html = '<option value="">请选择</option>';
            $.each($data, function (i, n) {
                html += '<option value="' + n.id + '">' + n.title + '</option>';
            })
            return html;
        },
        get_select_cateId_html: function ($data) {
            var html = '<option value="">请选择</option>';
            $.each($data, function (i, n) {
                html += '<option value="' + n.id + '">' + n.title + '</option>';
            })
            return html;
        },
        select_one_change: function (url) {
            var that = this;
            var formFilter = that.formFilter;
            layui.form.on('select(selectOne)', function (data) {
                var value = data.value;
                if (value === '') {
                    $('#selectTwo').html('');
                    $('#cateId').html('');
                } else {
                    $.post(url, {pid: value}, function (res) {
                        var data = res.data;
                        var html = that.get_select_two_html(data);
                        $('#selectTwo').html(html);
                        layui.form.render('select', formFilter);
                    }, 'json');
                }
            });
        },
        select_two_change: function (url) {
            var that = this;
            var formFilter = that.formFilter;
            layui.form.on('select(selectTwo)', function (data) {
                var value = data.value;
                if (value === '') {
                    $('#cateId').html('');
                } else {
                    $.post(url, {pid: value}, function (res) {
                        var data = res.data;
                        var html = that.get_select_cateId_html(data);
                        $('#cateId').html(html);
                        layui.form.render('select', formFilter);
                    }, 'json');
                }
            });
        },
        get_select_brand_html: function ($data) {
            var html = '<option value="">请选择</option>';
            $.each($data, function (i, n) {
                html += '<option value="' + n.id + '">' + n.title + '</option>';
            })
            return html;
        },
        select_brand: function (url) {
            var that = this;
            var formFilter = that.formFilter;
            var title = $('#brandTitle').val();
            if (title == '') {
                return false;
            }
            var obj = {title: title};
            $.post(url, obj, function (res) {
                if (res.code == 0) {
                    var data = res.data;
                    var html = that.get_select_brand_html(data);
                    $('#brand_id').html(html);
                    layui.form.render('select', formFilter);
                }
            }, 'json');
        },
        init: function (url, postData) {
            var that = this;
            var formFilter = that.formFilter;
            $.ajax({
                url: url,
                data: postData,
                type: 'post',
                async: true,
                success: function (res) {
                    var info = res.data.info;
                    if (info.id !== undefined) {

                        $('#uploadImg').attr('src', info.banner_url);
                        $('#uploadImgCover').attr('src', info.cover_url);
                        var html = '';
                        $.each(info.carousel_url, function (i, n) {
                            html += upload_obj.get_carousel_html(n.id, n.fileurl);
                        });
                        $('#carouselImageList').append(html);

                        var two_html = that.get_select_two_html(info.two_list);
                        $('#selectTwo').html(two_html);
                        var cate_html = that.get_select_cateId_html(info.cate_list);
                        $('#cateId').html(cate_html);

                        info.status = info.status.toString();
                        layui.form.val(formFilter, info);
                        ue.setContent(info.content);
                    }
                },
                dataType: 'json',
            });
        },
        submit: function (url) {
            var that = this;
            var formSubmit = that.formSubmit;
            layui.form.on('submit(' + formSubmit + ')', function (data) {
                var formData = data.field;
                $.post(url, formData, function (res) {
                    var message = res.message;
                    if (res.code == 0) {
                        layer.msg(message, {icon: 1, time: 2000});
                        layer_obj.close(2000);
                    } else {
                        layer.msg(message, {icon: 2, time: 2000});
                    }
                }, 'json')
                return false;
            });
        }
    };
    var upload_obj = {
        init: function (id, url) {
            var that = this;
            var elem = '#' + id;
            var type = $(elem).data('type');
            var done = $(elem).data('done');
            layui.upload.render({
                elem: elem,
                url: url,
                data: {type: type},
                done: function (res) {
                    var message = res.message;
                    if (res.code === 0) {
                        layer.msg(message, {icon: 1, time: 2000});
                        var data = res.data;
                        that.callback(data, done);
                    } else {
                        layer.msg(message, {icon: 2, time: 2000});
                    }
                }
            });
        },
        init_multiple: function (id, url) {
            var that = this;
            var elem = '#' + id;
            var type = $(elem).data('type');
            var done = $(elem).data('done');
            layui.upload.render({
                elem: elem,
                url: url,
                multiple: true,
                data: {type: type},
                done: function (res) {
                    var message = res.message;
                    if (res.code === 0) {
                        layer.msg(message, {icon: 1, time: 2000});
                        var data = res.data;
                        that.callback(data, done);
                    } else {
                        layer.msg(message, {icon: 2, time: 2000});
                    }
                }
            });
        },
        get_carousel_html: function (id, fileurl) {
            var html = '';
            html += '<div class="div-img">';
            html += '<img class="layui-upload-img" class="inline-box" width="100" height="100" src="' + fileurl + '">';
            html += '<span class="del-img" carousel="del" data-id="' + id + '">X</span>';
            html += '</div>';
            return html;
        },
        carousel_del: function () {
            $('body').on('click', '*[carousel="del"]', function () {
                var id = $(this).data('id');
                var carousel_ids = $('#uploadImgIdCarousel').val();
                var carousel_ids_arr = carousel_ids.split('_');
                var carousel_ids_arr_length = carousel_ids_arr.length;
                for (var x = 0; x < carousel_ids_arr_length; x++) {
                    if (id == carousel_ids_arr[x]) {
                        carousel_ids_arr.splice(x, 1)
                    }
                }
                $(this).parent().remove();
                if (carousel_ids_arr.toString() == '') {
                    carousel_ids = '';
                } else {
                    carousel_ids = carousel_ids_arr.join('_');
                }
                $('#uploadImgIdCarousel').val(carousel_ids);
            })
        },
        callback: function (data, done) {
            var that = this;
            var done = done || 'default';
            if (done == 'default') {
                $('#uploadImg').attr('src', data.fileurl);
                $('#uploadImgId').val(data.id);
            } else if (done == 'banner') {
                $('#uploadImg').attr('src', data.fileurl);
                $('#uploadImgId').val(data.id);
            } else if (done == 'cover') {
                $('#uploadImgCover').attr('src', data.fileurl);
                $('#uploadImgIdCover').val(data.id);
            } else if (done == 'carousel') {
                var id = data.id;
                var fileurl = data.fileurl;
                var html = that.get_carousel_html(id, fileurl);
                $('#carouselImageList').append(html);
                var carousel_ids = $('#uploadImgIdCarousel').val();
                if (carousel_ids == '') {
                    var carousel_ids_arr = [];
                    carousel_ids_arr.push(id);
                } else {
                    var carousel_ids_arr = carousel_ids.split('_');
                    carousel_ids_arr.push(id);
                }
                carousel_ids = carousel_ids_arr.join('_');
                $('#uploadImgIdCarousel').val(carousel_ids);
            }
        },
    };
    var layer_obj = {
        close: function (times) {
            setTimeout(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                parent.location.reload();
            }, times)
        }
    };
</script>
<script>
    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var url_insert = "{:url('admin/product/insert')}";
        var url_update = "{:url('admin/product/update')}";
        var url_upload = "{:url('admin/ajax/upload')}";
        var url_info = "{:url('admin/product/info')}";
        var url_cate_son = "{:url('admin/cate/sonList')}";
        var url_brand_lists = "{:url('admin/brand/allList')}";
        var id = "{$Think.get.id|default=0}";
        var postData = {id:id};
        //对页面数据进行初始化
        form_obj.init(url_info, postData, form);
        //监听提交
        var url_form = url_insert;
        if(id > 0){
            url_form = url_update;
        }
        form_obj.submit(url_form);
        //选择分类
        form_obj.select_one_change(url_cate_son);
        form_obj.select_two_change(url_cate_son);
        //上传图片
        upload_obj.init('uploadElem', url_upload);
        upload_obj.init('uploadElemCover', url_upload);
        upload_obj.init_multiple('uploadElemCarousel', url_upload);
        upload_obj.carousel_del();
    });
</script>